<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script
            src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous">
    </script>
    <style>
        #imgPreview {
            width: 40%;
            height: 180px;
            margin: 10px auto 0px auto;
            border: 1px solid black;
            text-align: center;
        }

        #prompt3 {
            width: 100%;
            height: 180px;
            text-align: center;
            position: relative;
        }

        #imgSpan {
            position: absolute;
            top: 60px;
            left: 40px;
        }

        .filepath {
            width: 100%;
            height: 100%;
            opacity: 0;
        }

        #img3 {
            height: 100%;
            width: 100%;
            display: none;
        }
    </style>
</head>
<body>
<div id="imgPreview">
    <div id="prompt3">
 <span id="imgSpan">
 点击上传
   <br/>
 <i class="aui-iconfont aui-icon-plus"></i>
     <!--AUI框架中的图标-->
 </span>
        <input type="file" id="file" class="filepath" onchange="changepic(this)"
               accept="image/jpg,image/jpeg,image/png,image/PNG">
        <!--当vaule值改变时执行changepic函数，规定上传的文件只能是图片-->
    </div>
    <img src="#" id="img3"/>
</div>
<script type="text/javascript">
    function changepic() {
        $("#prompt3").css("display", "none");
        var reads = new FileReader();
        f = document.getElementById('file').files[0];
        reads.readAsDataURL(f);
        reads.onload = function (e) {
            document.getElementById('img3').src = this.result;
            $("#img3").css("display", "block");
        };
    }

</script>
</body>
</html>